<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-10-13 16:33:11
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-10-13 21:27:10
 * @FilePath: /aibox/src/modules/good/src/review.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="page">
    <van-tabs v-model:active="activeName"  class="tabs full">
      <van-tab class="full" title="审核中" name="review">
        <scroll-view
          class="scroll"
          scroll-y="true"
          @refresherrefresh="refreshReviewAction"
          @scrolltolower="toLowerReviewAction"
          refresher-enabled="true"
        >
          <div class="grid column_2 p_xs">
            <div
              class="grid-item p_xs"
              v-for="item in reviewList"
              :key="item.id"
            >
              <Good
                @click="navigate(`/modules/good/src/check?id=${item.id}`)"
                v-bind="item"
              ></Good>
            </div>
          </div>
        </scroll-view>
      </van-tab>
      <van-tab class="full" title="审核通过" name="reviewed">
        <scroll-view
          class="scroll"
          scroll-y="true"
          @refresherrefresh="refreshReviewedAction"
          @scrolltolower="toLowerReviewedAction"
          refresher-enabled="true"
        >
          <div class="grid column_2 p_xs">
            <div
              class="grid-item p_xs"
              v-for="item in reviewedList"
              :key="item.id"  
            >
              <Good
                @click="navigate(`/modules/good/src/detail?id=${item.id}`)"
                v-bind="item"
              ></Good>
            </div>
          </div>
        </scroll-view>
      </van-tab>
      <van-tab class="full" title="未通过" name="fail">
        <scroll-view
          class="scroll"
          scroll-y="true"
          @refresherrefresh="refreshFailAction"
          @scrolltolower="toLowerFailAction"
          refresher-enabled="true"
        >
          <div class="grid column_2 p_xs">
            <div class="grid-item p_xs" v-for="item in failList" :key="item.id">
              <Good
                @click="navigate(`/modules/good/src/detail?id=${item.id}`)"
                v-bind="item"
              ></Good>
            </div>
          </div>
        </scroll-view>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Good } from '@/components';
import { navigate } from '@/service/navigate';
import { getGoodList } from '@/api/good.service';
import { usePageList } from '@/hooks/index';

export default defineComponent({
  components: {
    Good,
  },
  setup() {
    const activeName = ref('review');
    const {
      dataList: reviewList,
      toLowerAction: toLowerReviewAction,
      refreshAction: refreshReviewAction,
    } = usePageList(getGoodList, {
      type: 'review',
    });

    const {
      dataList: reviewedList,
      toLowerAction: toLowerReviewedAction,
      refreshAction: refreshReviewedAction,
    } = usePageList(getGoodList, {
      type: 'reviewed',
    });

    const {
      dataList: failList,
      toLowerAction: toLowerFailAction,
      refreshAction: refreshFailAction,
    } = usePageList(getGoodList, {
      type: 'fail',
    });

    return {
      navigate,
      activeName,
      reviewList,
      toLowerReviewAction,
      refreshReviewAction,
      reviewedList,
      toLowerReviewedAction,
      refreshReviewedAction,

      failList,
      toLowerFailAction,
      refreshFailAction,
    };
  },
});
</script>

<style lang="scss" scoped>
::v-deep(.tabs) {
  .van-tabs__content {
    width: 100%;
    height: calc(100% - 44px);
  }
}
</style>
